﻿@model PTop.Web.Areas.Questionnaire.Models.QnStatisticsModel
@{
    Layout = null;
    var questOptions = Model.QnQuestion.GetOptions();
    var categories = "'" + string.Join("','", questOptions) + "'";
    var aswOptions = Model.GetOptions();
    var data = string.Join(",", aswOptions);
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@Model.F_Question</title>
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
    <script src="~/Content/js/highcharts/highcharts.js"></script>
    <script>
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'bar'
                },
                title: {
                    text: '@Model.F_Question'
                },
                subtitle: {
                    text: '@Model.F_PaperTitle'
                },
                xAxis: {
                    categories: [@Html.Raw(categories)],
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '次数',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                    valueSuffix: ' 次'
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 0,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF',
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: "所有答题",
                    data: [@Html.Raw(data)]
                }]
            });
        });

    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
